<template name="collect-item">
    <view class="collect-item">
        <image
            :src="nft.img"
            class="collect-img"
            mode="aspectFill"
        ></image>
        <view class="collect-item-info">
            <u-text
                :text="nft.name"
                :lines="2"
                size="28rpx"
                color="#000000"
                margin="0 0 10rpx 0"
                class="collect-item-name"
            ></u-text>
            <view class="collect-num" v-if="showType === 'nft'">
                <u-text
                    :text="'数量 ' + number"
                    size="24rpx"
                    color="#B6B6B6"
                ></u-text>
                <view class="seller-btn" @click.stop="$u.route({
                    url: 'pages_v2/hangingSale/index',
                    params: { nftId: nft.id}
                })">挂售</view>
            </view>
            <view class="nft-code" v-if="showType === 'select'">
                <view class="nft-code-num">{{ ownerCode }}#{{ nft.total }}</view>
                <view class="nft-code-checkout" v-if="isSelect"></view>
                <view class="nft-code-radio" v-else></view>
            </view>
            <view class="nft-jiaoyi">
                <view
                    class="nft-valid"
                    :style="validNum == 0? {color: '#888888'}: null"
                    v-if="showType === 'select'"
                >
                    冷却期：{{ validAt | dateFormat }}
                </view>
                <view v-if="isExchange==1" class="jiaoyi-nft-state">挂售中</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { parseTime } from "@/untils"
    export default {
        name: "collect-item",
        props: {
            nft: {
                type: Object,
                default: () => {}
            },
            number: {
                type: [Number, String],
                default: 0
            },
            showType: {
                type: String,
                default: "nft"
            },
            isSelect: {
                type: Boolean,
                default: false
            },
            ownerCode: {
                type: Number,
                default: null
            },
            validNum: {
                type: Number,
                default: 0
            },
            validAt: {
                type: String,
                default: null
            },
            isExchange: {
                type: Number,
                default: 0
            }
        },
        filters: {
            dateFormat(val) {
                return parseTime(val, "{m}/{d} {h}:{i}")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .collect-item {
        background: #ffffff;
        border-radius: 14rpx;
        overflow: hidden;
        .collect-img {
            width: 100%;
            height: 344rpx;
            display: block;
        }
        .collect-item-info {
            padding: 20rpx 14rpx 28rpx 14rpx;
            .collect-num {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .seller-btn {
                    width: 88rpx;
                    height: 44rpx;
                    border-radius: 23rpx;
                    border: 1px solid #356CE7;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #356CE7;
                    text-align: center;
                    line-height: 44rpx;
                }
            }
            .collect-item-name {
                height: 80rpx;
                align-items: start;
            }
        }
        .nft-code {
            display: flex;
            justify-content: space-between;
            .nft-code-num {
                box-sizing: border-box;
                background: url("https://img.ionepin.com/29375029dd5190db4fba0afb8fc577c3ccd405bb.png") no-repeat;
                background-size: 100% 100%;
                width: 176rpx;
                height: 52rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 52rpx;
                padding-left: 10rpx;
            }
            .nft-code-radio {
                background: url("https://img.ionepin.com/33e306e6d477dcc78cfe4900e86250dd2c97417c.png") no-repeat;
                background-size: 100% 100%;
                width: 44rpx;
                height: 44rpx;
            }
            .nft-code-checkout {
                background: url("../../static/icon_checkout.png") no-repeat;
                background-size: 100% 100%;
                width: 44rpx;
                height: 44rpx;
            }
        }
        .nft-jiaoyi {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10rpx;
            .nft-valid {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #356CE7;
            }
            .jiaoyi-nft-state {
                font-size: 24rpx;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #356CE7;
            }
        }
    }
</style>
